<script setup lang="ts">
import type { TableProps } from 'ant-design-vue'

import { ref, watch } from 'vue'

import { useVbenModal } from '@vben/common-ui'

import { Button, message, Table } from 'ant-design-vue'

import { getReturnMaterialData } from '#/api/spuBom'

import ReturnMaterialData_info from './ReturnMaterialData_info.vue'

// 定义组件props并获取props引用
const props = defineProps<{
  data: any
}>()

const NeedPurchaseList = ref([])
// 监听data变化，更新表格数据
watch(
  () => props.data,
  (newData) => {
    if (newData) {
      initData(props.data.id)
    }
  },
  { immediate: true },
)

const columns: any = ref([
  {
    title: 'BOM类型',
    dataIndex: 'bom_name',
    key: 'bom_name',
    align: 'center',
    resizable: true,
  },
  {
    title: '实际面料',
    resizable: true,
    children: [
      {
        title: '面料名称',
        dataIndex: 'material_name',
        key: 'material_name',
        align: 'center',
        width: 400,
        ellipsis: true,
        resizable: true,
      },
      {
        title: '单价',
        dataIndex: 'price',
        key: 'price',
        align: 'center',
        resizable: true,
      },
      {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        align: 'center',
        resizable: true,
      },
    ],
  },
  {
    title: '需求量（系统）',
    dataIndex: 'need_num',
    key: 'need_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '累计已发数量',
    dataIndex: 'send_num',
    key: 'send_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '累计已发退数量',
    dataIndex: 'send_refund_num',
    key: 'send_refund_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '可退数量',
    dataIndex: 'be_return_num',
    key: 'be_return_num',
    align: 'center',
    resizable: true,
  },
])
const columns1: any = ref([
  {
    title: 'BOM类型',
    dataIndex: 'bom_name',
    key: 'bom_name',
    align: 'center',
    resizable: true,
  },
  {
    title: '实际面料',
    resizable: true,
    children: [
      {
        title: '面料名称',
        dataIndex: 'material_name',
        key: 'material_name',
        align: 'center',
        width: 400,
        ellipsis: true,
        resizable: true,
      },
      {
        title: '单价',
        dataIndex: 'price',
        key: 'price',
        align: 'center',
        resizable: true,
      },
      {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        align: 'center',
        resizable: true,
      },
    ],
  },
  {
    title: '需求量（系统）',
    dataIndex: 'need_num',
    key: 'need_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '已收数量',
    dataIndex: 'reviced_num',
    key: 'reviced_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '累计已发数量',
    dataIndex: 'send_num',
    key: 'send_num',
    align: 'center',
    resizable: true,
  },
  {
    title: '配置数量',
    dataIndex: 'num',
    key: 'num',
    align: 'center',
    resizable: true,
  },
])
function initData(id: any) {
  const param = {
    bomId: id,
  }
  getReturnMaterialData(param).then((response) => {
    NeedPurchaseList.value = response.data.data
  })
}

function refresh() {
  initData(props.data.id)
}

const selectRows: any = ref([])
const rowSelect: TableProps['rowSelection'] = {
  onChange: (selectedRowKeys: any, selectedRows: any) => {
    const transformedRows = selectedRows.map((row) => ({
      ...row,
      num: row.be_return_num,
    }))
    selectRows.value = transformedRows
  },
}

function placeOrder() {
  if (selectRows.value.length > 0) {
    ReturnMaterialData_infoModalApi.setData({ data: selectRows.value, id: props.data.id, purchase_id: props.data.purchase_id }).open()
  } else {
    message.error('请选择面料')
  }
}

const [ReturnMaterialData_infoModal, ReturnMaterialData_infoModalApi] = useVbenModal({
  connectedComponent: ReturnMaterialData_info,
})
</script>

<template>
  <div style="width: 100%; display: flex; justify-content: flex-end; margin-bottom: 10px">
    <strong style="font-size: 18px">可退料 :</strong>
  </div>
  <Table
    @resize-column="(w: any, col: any) => (col.width = w)"
    class="w-fill mb-2"
    :scroll="{ x: '100%', y: 'calc(25vh)' }"
    row-key="id"
    :row-selection="rowSelect"
    bordered
    :data-source="NeedPurchaseList"
    :columns="columns"
    :pagination="false"
    size="small"
  />
  <div style="width: 100%; display: flex; justify-content: flex-end; font-size: 18px">
    <strong>已选 :</strong>
  </div>

  <Table class="w-fill" @resize-column="(w: any, col: any) => (col.width = w)" bordered :data-source="selectRows" :scroll="{ x: '100%', y: 'calc(25vh)' }" :columns="columns1" :pagination="false" size="small" />
  <div style="width: 100%; display: flex; justify-content: flex-end; font-size: 18px">
    <Button type="primary" @click="placeOrder()">去退料</Button>
  </div>
  <ReturnMaterialData_infoModal @refresh="refresh()" />
</template>

<style scoped></style>
